<template>
    <div class="view">
        <div class="viewData" ref="viewData"></div>
        <input type="text" v-model="input" />
    </div>
</template>

<script>
import HtmlTest from './Class.js'
export default {
    components: {},
    data() {
        return {
            input: ''
        }
    },
    watch: {
        input(val) {
            // Value 的赋值方法，由于是Class 的Set 语句封装，
            // 可以进行双向绑定赋值
            this.Class && (this.Class.Value = val)
        }
    },
    mounted() {
        // 注意，这个变量的引用不要出现在Data中，一旦出现，
        // 就将会对实例化对象进行污染
        this.Class = new HtmlTest(this.$refs.viewData)
    }
}
</script>
<style lang="less" scoped>
.viewData {
    height: 300px;
}
</style>